<template>
  <div class="goods">
    <goods-list-item
      v-for="(item, index) in list"
      @click="goDetail(item.id)"
      :product="item"
      :key="index"
    >
    </goods-list-item>
  </div>
</template>

<script>
import { reactive, toRefs } from "vue";
import GoodsListItem from "./GoodsListItem.vue";
import { useRouter } from "vue-router";
import { availableProduct,buyProduct } from "@/api/product";
export default {
  components: {
    GoodsListItem,
  },
  setup() {
    const state = reactive({
      list: [],
      count: 0,
    });
    const router = useRouter();
    const goDetail = async (id) => {
      const res = await buyProduct(id)
      localStorage.setItem("chuvalue", res.data);
      router.push({ path: "/detail", query: { id } });
    };
    const initProducts = async () => {
      const res = await availableProduct();
      console.log(res);
      state.list = res.data;
      localStorage.setItem("availableList", JSON.stringify(state.list));
    };
    initProducts();
    return {
      ...toRefs(state),
      goDetail,
    };
  },
};
</script>

<style lang="scss" scoped>
.goods {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  padding: 5px;
  margin-bottom: 50px;
}
</style>
